import React, { Component } from 'react';

// 导入样式表
import './List.scss'

// 导入封装好的网络请求
import { index_nav } from '../../utils/api'

class List extends Component {
    constructor(props) {
        super(props);
        this.state = { //定义组件状态
            arr: [
            ]
        }
    }

    // 发送请求
    componentDidMount() { //挂载完成
        index_nav().then((res) => {
            this.state.arr = res.data.list
            this.setState({});
        })
    }

    render() {
        return (
            <div className='list'>
                {
                    //列表渲染，使用js中的map函数
                    this.state.arr.map((item, index) => {
                        return (
                            <div className="cate " key={index}>
                                <img src={item.pic} alt="" />
                                <div className="name">{item.name}</div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default List;